<template>
  <div class="css2_3">
      <h1>2.3 背景和边框</h1>
      <h2>2.3.1 CSS3 背景</h2>
      <p>
          <pre>
              属性 ,描述,CSS
background-clip 规定背景的绘制区域。
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
&lt;div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
&lt;/div>
          </pre>
      </p>
        <img src="../assets/images/3.25.png" alt="">
        <p></p>
        <p>
            <pre>
                background-origin 规定背景图片的定位区域。相对于内容框来定位背景图像：
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;background-origin:content-box;
}
            </pre>
        </p>
        <img src="../assets/images/3.26.png" alt="">
        <p></p>
        <p>
            <pre>
                background-size 规定背景图片的尺寸。
background-size: length|percentage|cover|contain；
            </pre>
        </p>
        <table border="1px">
            <tr>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>length</td>
                <td>设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。</td>
            </tr>
            <tr>
                <td>percentage</td>
                <td>以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。</td>
            </tr>
            <tr>
                <td>cover</td>
                <td>把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。</td>
            </tr>
        </table>
        <h2>2.3.2 CSS3 边框</h2>
        <p>
            <pre>
                圆角边框和阴影
•border-radius
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
}
            </pre>
        </p>
        <img src="../assets/images/3.27.png" alt="">
        <p></p>
        <p>
            <pre>
                •box-shadow
div
{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 10px 10px 5px #888888;
}
            </pre>
        </p>
        <img src="../assets/images/3.28.png" alt="">
        <table border="1px">
            <tr>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>h-shadow</td>
                <td>必需。水平阴影的位置。允许负值。</td>
            </tr>
            <tr>
                <td>v-shadow</td>
                <td>必需。垂直阴影的位置。允许负值。</td>
            </tr>
            <tr>
                <td>blur</td>
                <td>可选。模糊距离。</td>
            </tr>
            <tr>
                <td>spread</td>
                <td>可选。阴影的尺寸</td>
            <tr>
                <td>color</td>
                <td>可选。阴影的颜色。请参阅 CSS 颜色值。</td>
            </tr>
            <tr>
                <td>inset</td>
                <td>可选。将外部阴影 (outset) 改为内部阴影。</td>
            </tr>
        </table>
        <p>
            <pre>
                •border-image
&lt;style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;	/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
&lt;/style>
&lt;body>
&lt;div id="round">在这里，图片铺满整个边框。&lt;/div>
&lt;br>
&lt;div id="stretch">在这里，图片被拉伸以填充该区域。&lt;/div>
&lt;p>这是我们使用的图片：&lt;/p>
&lt;img src="/i/border.png">
&lt;p>&lt;b>注释：&lt;/b> Internet Explorer 不支持 border-image 属性。&lt;/p>
&lt;p>border-image 属性规定了用作边框的图片。&lt;/p>
&lt;/body>
            </pre>
        </p>
        <img src="../assets/images/3.29.png" alt="">
        <table border="1px">
            <tr>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>border-image-source</td>
                <td>用在边框的图片的路径。</td>
            </tr>
            <tr>
                <td>border-image-slice</td>
                <td>图片边框向内偏移。</td>
            </tr>
            <tr>
                <td>border-image-width</td>
                <td>图片边框的宽度。</td>
            </tr>
            <tr>
                <td>border-image-outset</td>
                <td>边框图像区域超出边框的量。</td>
            </tr>
            <tr>
                <td>border-image-repeat</td>
                <td>图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。</td>
            </tr>
        </table>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>